<template>
  <div class="admin-layout">
    <el-container>
      <el-aside width="auto">
        <el-menu
          :default-active="route.path"
          class="el-menu-vertical"
          :collapse="isCollapse"
          background-color="#304156"
          text-color="#bfcbd9"
          active-text-color="#409EFF"
          router
          @select="handleSelect"
        >
          <div class="logo-container">
            <span v-if="!isCollapse">流浪动物救助平台</span>
            <span v-else>救助</span>
          </div>
          
          <el-menu-item index="/admin">
            <i class="fas fa-tachometer-alt"></i>
            <template #title>控制面板</template>
          </el-menu-item>
          
          <el-menu-item index="/admin/users">
            <i class="fas fa-users"></i>
            <template #title>用户管理</template>
          </el-menu-item>
          
          <el-menu-item index="/admin/adoption-posts">
            <i class="fas fa-paw"></i>
            <template #title>宠物领养贴管理</template>
          </el-menu-item>
          
          <el-menu-item index="/admin/adoption-records">
            <i class="fas fa-clipboard-list"></i>
            <template #title>动物领养记录管理</template>
          </el-menu-item>
          
          <el-menu-item index="/admin/surrender-posts">
            <i class="fas fa-hand-holding-heart"></i>
            <template #title>动物送养贴管理</template>
          </el-menu-item>
          
          <el-menu-item index="/admin/donations">
            <i class="fas fa-donate"></i>
            <template #title>爱心捐募管理</template>
          </el-menu-item>
          
          <el-menu-item index="/admin/pet-categories">
            <i class="fas fa-tags"></i>
            <template #title>宠物类别管理</template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      
      <el-container>
        <el-header>
          <div class="header-left">
            <el-button type="text" @click="isCollapse = !isCollapse">
              <i :class="[isCollapse ? 'fas fa-expand' : 'fas fa-compress']"></i>
            </el-button>
            
            <el-breadcrumb separator="/">
              <el-breadcrumb-item v-for="item in breadcrumbs" :key="item.path" :to="item.path">
                {{ item.name }}
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="header-right">
            <el-dropdown>
              <span class="el-dropdown-link">
                <el-avatar :size="30" :src="userInfo.avatar ? `/api/Userfile/${userInfo.avatar}` : ''" />
                你好！{{ userInfo.name }} <i class="fas fa-chevron-down"></i>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                 
                  <el-dropdown-item @click="handleLogout">
                    <i class="fas fa-sign-out-alt"></i> 退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const isCollapse = ref(false)

const userInfo = ref(JSON.parse(localStorage.getItem('userInfo') || '{}'))

// 路由映射表
const routeMap = {
  'Dashboard': '控制面板',
  'UserManagement': '用户管理',
  'AdoptionPostManagement': '宠物领养贴管理',
  'AdoptionRecordManagement': '动物领养记录管理',
  'SurrenderPostManagement': '动物送养贴管理',
  'DonationManagement': '爱心捐募管理',
  'PetCategoryManagement': '宠物类别管理'
}

// 计算面包屑数据
const breadcrumbs = computed(() => {
  const { name } = route
  return [
    {
      path: '/admin',
      name: '首页'
    },
    {
      path: route.path,
      name: routeMap[name] || name
    }
  ]
})

const handleSelect = (key) => {
    router.push(key)
}

const handleLogout = () => {
    localStorage.removeItem('userInfo')
    router.push('/login')
}
</script >
<style scoped lang="scss">
.admin-layout {
  width: 100vw;
  height: 100vh;
}

.el-container {
  height: 100%;
}

.el-aside {
  background-color: #304156;
  transition: width 0.3s;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
}

.logo-container {
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #1f2d3d;
}

.el-header {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.header-right {
  display: flex;
  align-items: center;
}

.el-main {
  background-color: #f0f2f5;
  padding: 20px;
}

.el-menu-item i {
  margin-right: 5px;
  width: 24px;
  text-align: center;
}

.el-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}

.el-dropdown-menu i {
  margin-right: 5px;
}

.el-breadcrumb {
  line-height: 1;
  font-size: 14px;
}

:deep(.el-breadcrumb__item) {
  .el-breadcrumb__inner {
    color: #97a8be;
    &.is-link {
      color: #606266;
      &:hover {
        color: #409EFF;
      }
    }
  }
  &:last-child {
    .el-breadcrumb__inner {
      color: #97a8be;
    }
  }
}
</style> 